<template>
  <div class="result-list">
    <div
      class="h-[24px] flex items-center text-[12px] text-[#898989] border-b-[1px] border-solid border-[#ddd]"
    >
      <div class="w-[50px] text-center">期号</div>
      <div class="flex-1 w-0 flex items-center">号码</div>
      <div class="w-[130px] flex items-center">开奖结果</div>
    </div>
    <div class="grow-[1] h-[calc(100%_-_24px)] overflow-auto">
      <scroll-list
        v-model:loading="state.loading"
        :finished="state.finished"
        :length="state.list.length"
        :showFinished="false"
      >
        <template v-for="(item, index) in state.list">
          <div
            class="w-full h-[26px] py-[6px] flex items-center"
            :class="{
              'bg-[#eee]': index % 2 != 0
            }"
          >
            <div class="w-[50px] text-center text-[14px] text-[#666]">
              {{ item.BitchNo.substr(-5) }}
            </div>
            <div class="flex-1 w-0 flex items-center">
              <div class="w-[22px] h-[22px] flex items-center justify-center">
                <pcdd-ball type="small" :num="getlotteryCode(item)[0]"></pcdd-ball>
              </div>
              <span class="w-[20px] flex justify-center items-center text-[14px]">+</span>
              <div class="w-[22px] h-[22px] flex items-center justify-center">
                <pcdd-ball type="small" :num="getlotteryCode(item)[1]"></pcdd-ball>
              </div>
              <span class="w-[20px] flex justify-center items-center text-[14px]">+</span>
              <div class="w-[22px] h-[22px] flex items-center justify-center">
                <pcdd-ball type="small" :num="getlotteryCode(item)[2]"></pcdd-ball>
              </div>
              <span class="w-[20px] flex justify-center items-center text-[14px]">=</span>
              <div class="w-[22px] h-[22px] flex items-center justify-center">
                <pcdd-ball type="small" :num="getCodeNumSum(item)"></pcdd-ball>
              </div>
            </div>
            <div class="w-[130px]">
              <span
                class="mr-[4px] text-red"
                :class="{
                  'text-blue': extendedRes(item).ds == '小'
                }"
                >{{ extendedRes(item).dx }}</span
              >
              <span
                class="mr-[4px] text-red"
                :class="{
                  'text-blue': extendedRes(item).ds == '单'
                }"
                >{{ extendedRes(item).ds }}</span
              >
              <span
                class="mr-[4px] text-red"
                :class="{
                  'text-blue': extendedRes(item).dxds == '小单' || extendedRes(item).dxds == '大单'
                }"
                >{{ extendedRes(item).dxds }}</span
              >
              <span class="text-green">{{ extendedRes(item).bds }}</span>
            </div>
          </div>
        </template>
      </scroll-list>
    </div>
    <div
      class="border-top py-[12px] flex justify-center items-center text-[14px] text-blue"
      v-if="state.list.length > 0"
      @click="$router.push(`/admin/openresult?gameId=${roomState.gameId}`)"
    >
      <span class="mr-[4px]">查看更多</span>
      <img class="w-[12px]" src="@/assets/images/history-more.png" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import $bus from "@/utils/bus";
import { useResult } from "../hooks/use-result";
import { debounce } from "lodash-es";
import { pcddSumLH } from "@/utils/game";

const { roomState, pcddBall, scrollList, state, getData, refresh, getlotteryCode, getCodeNumSum } =
  useResult();

const extendedRes = (item: HistoryMo) => {
  return pcddSumLH(getlotteryCode(item));
};

onMounted(() => {
  getData();
  // 监听开奖推送
  $bus.on(
    "open-result-complete",
    debounce(() => {
      refresh();
    }, 500)
  );
});
</script>
<style lang="scss" scoped>
.result-list {
  position: absolute;
  top: 88px;
  left: 0%;
  width: 100%;
  height: 254px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
